<template>
  <div class="wrapper">
    <dx-header-bar title="质量拨测"></dx-header-bar>
    <div class="container">
      <div class="panel">
        <div class="title" @click="openDetails('地市专线概括','cityLine')">
          <span class="line"></span>
          <p>地市专线概括</p>
        </div>
        <dx-e-chart ref="chartCpt"
                    class="chart"
                    :color="['#ff9a3f']"
                    :x-axis-vertical="true"
                    :y-axis="yAxis"
                    :x-axis-data="chartXAxisData"
                    :showLegend='true'
                    :series="chartSeries"
        ></dx-e-chart>
      </div>
      <div class="panel">
        <div class="title" @click="openDetails('TOP10最差行业网站','worst')">
          <span class="line"></span>
          <p>TOP10最差行业网站</p>
        </div>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <thead>
          <tr>
            <th width="10%">序号</th>
            <th width="40%">网站</th>
            <th width="25%">移动得分</th>
            <th width="25%">电信得分</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in worstList" :key="index">
            <td>{{index + 1}}</td>
            <td>{{item.GOAL_NAME}}</td>
            <td>{{item.QUALITY_SCORE}}</td>
            <td>{{item.OTHER_SCORE}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="panel">
        <div class="title" @click="openDetails('全省行业网站质量TOP10','top')">
          <span class="line"></span>
          <p>全省行业网站质量TOP10</p>
        </div>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <thead>
          <tr>
            <th width="10%">序号</th>
            <th width="60%">网站名</th>
            <th width="30%">综合评分</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in topTenList" :key="index">
            <td>{{index + 1}}</td>
            <td>{{item.GOAL_NODE_NAME}}</td>
            <td>{{item.SCORE}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar, DxEChart } from '@/components';
import { getCitiesLine, getEndGuildWeb, getTopGuildWeb } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart
  },
  data() {
    return {
      timestamp: Number(this.$route.query.timestamp),
      citiesLineList: [],
      chartXAxisData: [],
      chartSeries: [],
      yAxis: [
        {
          type: 'value',
          splitLine: { show: false },
          scale: true
        }
      ],
      worstList: [],
      topTenList: []
    };
  },
  activated() {
    const time = Number(this.$route.query.timestamp);
    if (this.timestamp !== time) {
      this.loadData();
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.loadCitiesLineData();
      this.loadEndGuildWeb();
      this.loadTopGuildWeb();
    },
    loadCitiesLineData() {
      this.$refs.chartCpt.showLoading();
      getCitiesLine().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          const xAxisData = [];
          const seriesData = [];
          data.forEach(item => {
            xAxisData.push(item.REGION);
            seriesData.push(item.SCORE);
          });
          this.chartXAxisData = [xAxisData];
          this.chartSeries = [
            {
              name: '评分',
              type: 'line',
              data: seriesData
            }
          ];
          this.$nextTick(() => {
            this.$refs.chartCpt.updateChart();
          });
        }
      }).catch(error => {
        this.$refs.chartCpt.hideLoading();
        console.log(error);
      });
    },
    loadEndGuildWeb() {
      getEndGuildWeb().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.worstList = data;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    loadTopGuildWeb() {
      getTopGuildWeb().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.topTenList = data;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    openDetails(name, types) {
      this.$router.push({
        name: 'dialDetails',
        query: {
          title: name,
          type: types
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    height: 100%
    display: flex
    flex-direction: column

  .container
    flex: 1
    overflow-y: auto
    font-size: 28px
    padding-bottom: 30px

    .panel
      background: #fff
      margin-top: 30px

      &:nth-of-type(1)
        .title
          border-bottom: 1px solid #eee

      .line
        width: 8px
        border-radius: 8px
        line-height: 40px
        background: #ff9a3f
        display: block
        margin-right: 20px

      .title
        font-size: 32px
        font-weight: bold
        position: relative
        padding: 20px 0 20px 20px
        line-height: 40px
        display: flex

      .chart
        height: 500px

  table
    line-height: 60px
    background: #fff
    text-align: center

    th, td
      padding: 0.1rem 0.08rem;
      border-bottom: 1px solid #eee
      border-right: 1px solid #eee

    thead
      tr
        background: #f5f9fe
</style>
